<template>
    <div>
      <!-- 查询框 -->
      <el-input
        placeholder="请输入申请编号或用户编号"
        v-model="searchText"
        style="width: 200px; margin-bottom: 20px;">
      </el-input>
      <el-button @click="fetchData" icon="el-icon-search" circle></el-button>
  
      <!-- 新增按钮 -->
      <el-button type="primary" @click="showCreateDialog" icon="el-icon-plus" style="margin-bottom: 10px;">新增申请</el-button>
  
      <!-- 列表展示 -->
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="aid" label="申请编号" width="180">
          <template #default="scope">
        A00{{ scope.row.aid }}
      </template>
        </el-table-column>
        <el-table-column prop="uid" label="用户编号" width="180">
          <template #default="scope">
        A00{{ scope.row.uid }}
      </template>
        </el-table-column>
        <el-table-column prop="oid" label="订单编号" width="180">
          <template #default="scope">
        A00{{ scope.row.oid }}
      </template>
        </el-table-column>
        <el-table-column prop="type" label="申请类型" width="180"></el-table-column>
        <el-table-column prop="astatu" label="申请状态" width="180"></el-table-column>
        <el-table-column prop="atime" label="申请时间" width="180"></el-table-column>
        <el-table-column prop="pid" label="商品信息" width="180">
          <template #default="scope">
        A00{{ scope.row.pid }}
      </template>
        </el-table-column>
        <!-- 操作列 -->
        <el-table-column label="操作" width="120">
          <template slot-scope="scope">
            <el-button @click="showEditDialog(scope.row)" type="text" size="small">修改</el-button>
            <el-button  @click="confirmDelete(scope.row.aid)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
  
      <!-- 新增和修改的对话框 -->
      <el-dialog :visible.sync="dialogVisible" :title="dialogTitle">
        <el-form :model="orderForm">
          <el-form-item label="用户编号" label-width="100px">
            <el-input v-model="orderForm.uid" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="订单编号" label-width="100px">
            <el-input v-model="orderForm.oid" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="申请类型" label-width="100px">
            <el-select v-model="orderForm.type" placeholder="请选择申请类型">
    <el-option label="退货" value="退货"></el-option>
    <el-option label="换货" value="换货"></el-option>
  </el-select>
          </el-form-item>
          <el-form-item label="申请状态" label-width="100px">
            <el-select v-model="orderForm.astatu" placeholder="请选择申请状态">
    <el-option label="待处理" value="待处理"></el-option>
    <el-option label="处理中" value="处理中"></el-option>
    <el-option label="已处理" value="已处理"></el-option>
  </el-select>
          </el-form-item>
          <el-form-item label="申请时间" label-width="100px">
            <el-date-picker
    v-model="orderForm.atime"
    type="datetime"
    placeholder="选择日期时间"
    value-format="yyyy-MM-dd HH:mm:ss">
  </el-date-picker>
          </el-form-item>
          <el-form-item label="商品信息" label-width="100px">
            <el-input v-model="orderForm.pid" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveApply">确 定</el-button>
          </div>
        </el-dialog>
    </div>
    </template>
    <script>
    import {listApply,addOrEditApply,delApply} from "@/api/apply"
        export default {
            data() {
      return {
        tableData: [], // 表格数据
        searchText: '', // 查询框内容
        dialogVisible: false, // 对话框显示状态
        dialogTitle: '', // 对话框标题
        orderForm: { // 订单表单
            aid: '',
        uid: '',
        oid: '',
        type: '',
        astatu: '',
        atime: '',
        pid: ''
        }
      };
    },
    created() {
    this.fetchData();
  },

  methods: {
    fetchData() {
        
      listApply(this.queryParams).then(response => {
        this.tableData = response.data;
      });
      },
    // 显示新增对话框
    showCreateDialog() {
      this.dialogTitle = '新增申请';
      this.orderForm = {
        aid: '',
        uid: '',
        oid: '',
        type: '',
        astatu: '',
        atime: '',
        pid: ''
      };
      this.dialogVisible = true;
    },
    // 显示修改对话框
    showEditDialog(order) {
      this.dialogTitle = '修改申请';
      this.orderForm = { ...order };
      this.dialogVisible = true;
    },
    // 保存商品（新增或修改）
    saveApply() {
      if (this.orderForm.aid) {
        // 调用接口修改商品
        addOrEditApply(this.orderForm).then(response => {
          
          this.$message({
            message: '修改成功',
            type: 'success'
          });
          this.dialogVisible = false;
        this.fetchData();
        });
      } else {  
        // 调用接口新增商品
        addOrEditApply(this.orderForm).then(response => {
          this.$message({
            message: '新增成功',
            type: 'success'
          });
          this.dialogVisible = false;
          this.fetchData();
        });
      }
      
    },

      confirmDelete(aid) {
      this.$confirm('确定要删除这项吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 调用接口删除产品
        this.deleteApply(aid);
      }).catch(() => {
        // 用户点击取消，不做任何操作
      });
    },
   // 删除商品
   deleteApply(aid) {
    delApply(aid).then(() => {
        this.fetchData();
        this.$message({
          message: '删除成功',
          type: 'success'
        });
      }).catch(error => {
        console.error('删除失败', error);
        this.$message.error('删除失败');
      });
    },
}
        }
</script>